<template>
  <div class="container">
    <div class="calcMain">
      <div class="topBtn">
        <div>
          <span class="pageTitle">评估计算执行</span>
          <span class="qing">（请选择任务或新建任务进行评估计算执行）</span>
        </div>
      </div>
      <div class="bottomMain">
        <div style="display: flex; align-items: center;padding-bottom: 10px">
          <div class="title1 flexAlign">
            <img :src="require('@/assets/images/task.png')" alt="" srcset="" />
            <span style="color: #393B3C;font-weight: bold">任务列表</span>
          </div>
          <el-button
            class="flexAlign"
            style="margin-left: 20px;font-weight: 600;margin-top: 3px"
            type="primary"
            icon="el-icon-plus"
            size="mini"
            @click="setPanel('add')"
          >
            新建任务
          </el-button>
        </div>
        <div class="tableContainer">
          <div class="topBtn" style="border: none; padding: 0">
            <div class="flexAlign">
              <el-form
                :inline="true"
                size="mini"
                :model="formInline"
                class="demo-form-inline"
                style="display: flex; justify-content: space-between;margin-top: 15px"
              >
                <el-form-item label="创建时间">
                  <el-date-picker
                    v-model="formInline.createTime"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="任务编号">
                  <el-input
                          v-model="formInline.code"
                          placeholder="输入任务编号"
                          clearable
                  ></el-input>
                </el-form-item>
                <el-form-item label="模型名称">
                  <el-input
                    v-model="formInline.emName"
                    placeholder="输入模型名称"
                    clearable
                  ></el-input>
                </el-form-item>

                <el-form-item>
                  <el-button
                    class="flexAlign"
                    type="primary"
                    size="mini"
                    @click="searchP"
                  >
                    <img :src="require('@/assets/images/cha3.png')" alt="" srcset="" />
                    查询
                  </el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <el-table
            class="myTabel"
            :data="taskLists"
            border
            stripe
            size="mini"
            height="550"
            row-key="id"
            :header-cell-style="{ textAlign: 'center',  }"
            :cell-style="{'text-align':'center'}"
            default-expand-all
            :tree-props="{ children: 'children' }"
            @row-click="chuliClick"
          >
            <el-table-column label="选择" align="center" type="" width="70">
              <template slot-scope="scope">
                <el-radio
                  :label="scope.row.id"
                  v-model="inputValue"
                  v-if="scope.row.id && scope.row.status!=-1"
                >
                  {{ "" }}
                </el-radio>
              </template>
            </el-table-column>
            <el-table-column width="70" label="序号" prop="parentIndex">
              <template slot-scope="scope">
                <span v-if="scope.row.isIndex">{{scope.row.parentIndex}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="code" label="任务编号" type="" > </el-table-column>
            <el-table-column prop="name" label="任务名称"> </el-table-column>
<!--            <el-table-column prop="renwudaima" label="任务代码" aline="center"> </el-table-column>-->
            <el-table-column prop="createTime" label="创建日期"> </el-table-column>
            <el-table-column prop="createBy" label="创建人员"> </el-table-column>
            <el-table-column prop="content" label="任务描述"> </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  :disabled="scope.row.status==-1"
                  type="danger"
                  @click="handleDelete(scope.row)">删除</el-button>
              </template>
            </el-table-column>
            <!--            <el-table-column prop="det" label="详情">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button-->
<!--                  @click.native.prevent="deleteRow(scope.row)"-->
<!--                  type="text"-->
<!--                  size="small"-->
<!--                >-->
<!--                  查看-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="weihu" label="维护">-->
<!--              <template slot-scope="scope">-->
<!--                <el-button-->
<!--                  @click.native.prevent="deleteRow(scope.row)"-->
<!--                  type="text"-->
<!--                  size="small"-->
<!--                  v-if="scope.row.indexOrder"-->
<!--                >-->
<!--                  导入-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
          </el-table>
          <el-pagination
            background
            layout="total, prev, pager, next"
            :total="pTotal"
            :current-page="pCurrPage"
            @current-change="changePPage"
            style="text-align: right"
          >
          </el-pagination>
        </div>
        <div class="bottomBtn">
          <el-button
            class="flexAlign"
            type="primary"
            size="mini"
            @click="setPanel('calc')"
          >
            <img :src="require('@/assets/images/zancun.png')" alt="" srcset="" />
            评估计算
          </el-button>
        </div>
      </div>
    </div>
    <el-dialog :title="importDialogTitle" :visible.sync="importDialog" width="60%">
      <el-form
        :inline="true"
        size="mini"
        :model="formInline"
        class="demo-form-inline"
        style="display: flex; justify-content: space-between"
      >
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="formInline.createTime"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="formInline.type" placeholder="类型" clearable>
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="模型名称">
          <el-input
            v-model="formInline.modelName"
            placeholder="模型名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">
            <img :src="require('@/assets/images/cha3.png')" alt="" srcset="" />
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <el-table
        :data="modelList"
        border
        stripe
        size="mini"
        @row-click="rowClick"
        show-overflow-tooltip
        highlight-current-row
      >
        <el-table-column label="选择" width="55" align="center">
          <template slot-scope="scope">
            <el-radio :label="scope.row.id" v-model="currModelId">
              {{ "" }}
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" align="center" label="序号" width="60">
        </el-table-column>
        <el-table-column prop="name" label="评估模型名称"> </el-table-column>
        <el-table-column prop="type" align="center" label="模型类型"> </el-table-column>
        <el-table-column prop="updateTime" align="center" label="暂存时间" width="150">
        </el-table-column>
        <el-table-column prop="createBy" label="创建人员"> </el-table-column>
        <el-table-column prop="polymerizationAlg" label="算法类型"> </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, prev, pager, next"
        :total="modelTotle"
        :current-page="modelCurrPage"
        @current-change="changeModelPage"
        style="text-align: right"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="importDialog = false">取 消</el-button>
        <el-button
          size="mini"
          :disabled="!currModelId"
          type="primary"
          @click="commitImport"
        >
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getModelList,
  importModel,
  getPretreatmentList,
  modelCalc,
  getTreeData,
  getDictList,
  tempEdit,
  getTaskList,
  getTaskListDelete
} from "@/api/calc";
const PING = "评估模型";
const CAO = "草稿箱模板";
const PINGTITLE = "选择评估模型";
const CAOTITLE = "选择草稿箱模板";

export default {
  name: "taskContainer",
  props: {
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      methodsDialog: false,
      direction: "rtl",
      drawer: false,
      linkForm: [],
      linkDialog: false,
      fileList: [],
      modelType: 1,
      modelList: [],
      modelCurrPage: 1,
      modelTotle: 0,
      formInline: {
        emName:'',
        code:'',
        createTime:[],
        value1: "",
        region: "",
        user: "",
      },
      importType: PING,
      importDialog: false,
      importDialogTitle: "",
      cities: [],
      dynamicTags: [],
      inputVisible: false,
      inputValue: "",
      chuliMethods: [],
      value: "",
      pCurrPage: 1,
      pTotal: 0,
      taskLists: [
        {
          id: 1,
          indexOrder: "1",
          name: "Kd",
          renwudaima: "KD003",
          riqi: "2024.1.5",
          ren: "张某某",
          det: "",
          weihu: "",
          vadio:true
        },
        {
          id: 2,
          vadio:false,

          indexOrder: "2",
          name: "Kd",
          renwudaima: "KD003",
          riqi: "2024.1.5",
          ren: "张某某",
          det: "",
          weihu: "",
          children: [
            {
              id: 21,
              name: "001",
              riqi: "2024.1.5",
              ren: "张某某",
              det: "",
              weihu: "",
            },
            {
              id: 22,
              name: "002",
              renwudaima: "KD003",
              riqi: "2024.1.5",
              ren: "张某某",
              det: "",
              weihu: "",
            },
          ],
        },
        {
          id: 3,
          indexOrder: "3",
          name: "Kd",
          renwudaima: "KD003",
          riqi: "2024.1.5",
          ren: "张某某",
          det: "",
          weihu: "",
        },
      ],
      input4: "",
      currModelId: 0, // 当前选中的模型id
      currModel: {}, // 当前选中的模型
      commitModel: {},
    };
  },
  computed: {
    isSelectedModel: function () {
      return JSON.stringify(this.commitModel) !== "{}";
    },
  },
  created() {
    this.getDict("sys_data_source", "cities");
    // this.getDict("sys_data_methods", "chuliMethods");
  },
  mounted() {
    this.searchP()
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    setPanel(panel) {
      if(panel=='add'){
        this.$emit("changePanel", {name:'add'});
      }else{
        if(this.inputValue){
          this.$emit("changePanel", {name:'calc',rwId: this.inputValue,alreadyData:this.alreadyData,add:false});
        }else{
          this.$message.error(`请选择任务或新建任务后计算!`);
        }
      }

    },
    tableSelectFun(val, id) {
      // let index = this.taskLists.findIndex((item) => {
      //   return item.id === id;
      // });
      // let item = this.taskLists[index];
      // item.originalValue = val;
      // this.$set(this.taskLists, index, item);
      // console.log(this.taskLists);
    },
    tableInputFun(val, id) {
      let index = this.taskLists.findIndex((item) => {
        return item.id === id;
      });
      let item = this.taskLists[index];
      item.normalizationAlgSet = val;

      this.$set(this.taskLists, index, item);
      console.log(this.taskLists);
    },
    formatTree(node) {
      if (!node) {
        return;
      }
      node.id = node.id.toString();
      node.num = node.weight.toString();
      node.label = node.name;
      node.children = node.childList;
      if (node.level <= 3) {
        node.size = [120, 50];
      } else {
        node.size = [40, 140];
      }
      if (node.children && node.children.length) {
        var i = 0;
        for (i = 0; i < node.children.length; i++) {
          this.formatTree(node.children[i]);
        }
      }
    },
    tagClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },

    showInput() {
      this.inputVisible = true;
      this.inputValue = "";
      this.$nextTick((_) => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    chuliClick(val) {
      this.alreadyData = val
      this.inputValue = val.key;
      if (this.inputVisible) {
        this.handleInputConfirm();
      }
    },
    getDict(dictType, key) {
      getDictList({
        pageNum: 1,
        pageSize: 20,
        dictType,
      }).then((res) => {
        if (res.code == 200) {
          this[key] = res.rows;
        }
      });
    },
    searchP() {
      this.pCurrPage = 1;
      this.getPretreatment();
    },
    changePPage(val) {
      this.pCurrPage=val
      this.getPretreatment();
    },
    changeModelPage() {
      this.getModel();
    },
    commitImport() {
      this.commitModel = this.currModel;
      importModel({ status: this.modelType, id: this.commitModel.id }).then((res) => {
        this.importDialog = false;
        this.$modal.msgSuccess("导入成功");
      });
      this.pCurrPage = 1;
      this.getPretreatment();
    },
    //删除
    handleDelete(val){
      this.$confirm('是否删除该任务?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        getTaskListDelete({id:val.id}).then((res) => {
          if (res.code == 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getPretreatment()
          }
          else {
              this.$message({
                type: 'error',
                message: '删除失败，请重试!'
              });
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });

    },
    getPretreatment() {
      getTaskList({
        startTime: this.formInline.createTime[0],
        endTime: this.formInline.createTime[1],
        code: this.formInline.code,
        emName:this.formInline.emName,
        pageNo: this.pCurrPage,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 200) {
          res.data.records.map((e) => {
            if (!e.dataPreprocessingAlg) {
              e.dataPreprocessingAlg = "";
            }
            return e;
          });
          this.taskLists = res.data.records;
          this.taskLists.forEach((item, index) => {
            item.isIndex = true;
            item.parentIndex = index + 1;
          });
          this.pTotal = res.data.total;
        }
      });
    },
    calc() {
      if (
        !this.taskLists.some((item) => {
          return item.normalizationAlgSet == "";
        })
      ) {
        tempEdit({
          code: this.commitModel.code,
          name: this.commitModel.name,
          nodeList: this.taskLists,
        }).then((res) => {
          if (res.code == 200) {
            modelCalc({ code: this.modelType }).then((res) => {
              this.$modal.msgSuccess("计算完成");
              getTreeData({ code: this.modelType }).then((res) => {
                if (res.code == 200) {
                  this.formatTree(res.data);
                  console.log(res.data);
                }
              });
            });
          }
        });
      } else {
        this.$modal.msgWarning("请填写系统标准数据");
      }
    },
    view() {},
    deleteRow(row) {
      this.settingRow = row;
      this.methodsDialog = true;
    },
    rowClick(val) {

      this.currModelId = val.id;
      this.currModel = val;
    },
    onSubmit() {
      this.modelCurrPage = 1;
      this.getModel();
    },
    importByPing() {
      this.modelType = 1;
      this.modelCurrPage = 1;
      this.importDialogTitle = PINGTITLE;
      this.importType = PING;
      this.getModel();
    },
    importByCao() {
      this.modelType = 2;
      this.modelCurrPage = 1;
      this.importDialogTitle = CAOTITLE;
      this.importType = CAO;
      this.getModel();
    },
    getModel() {
      const params = {
        createTime: this.formInline.createTime,
        type: this.formInline.type,
        modelName: this.formInline.modelName,
        status: this.modelType,
        pageNo: this.modelCurrPage,
        pageSize: 10,
      };
      this.importDialog = true;
      getModelList(params).then((res) => {
        if (res.code == 200) {
          this.modelList = res.data.records;
          this.modelTotle = res.data.total;
        }
      });
    },
    handleSelectionChange() {},
  },
};
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 10px;
  ::v-deep .el-date-editor--daterange.el-input__inner {
    width: 250px;
  }
  ::v-deep .el-button span {
    display: flex;
    align-items: center;
    img {
      display: block;
      margin-right: 5px;
    }
  }
  .flexAlign {
    display: flex;
    align-items: center;
    img {
      display: block;
      margin-right: 5px;
    }
    span {
      display: flex;
      align-items: center;
    }
  }

  .calcMain {
    background-color: #fff;
    box-shadow: 0 0 10px 10px #ccc;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), #ffffff);
    box-shadow: 0px 4px 10px 0px rgba(0, 34, 64, 0.05);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 0 3px 0 rgba(0, 0, 0, 0.04);
    border-radius: 5px;
    height: 100%;
    width: 100%;
    .topBtn {
      height: 50px;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e4e8f1;
      .line {
        width: 1px;
        height: 30px;
        margin: 0 20px;
        background: #e4e8f1;
        border-radius: 1px;
      }
      .pageTitle {
        font-weight: 600;
        color: #3771F5;
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        line-height: 30px;
      }

      .pageTitle1 {
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #333;
        line-height: 30px;
      }
      .qing {
        font-size: 14px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #878c98;
        line-height: 30px;
      }
      .xinjian {
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 500;
        color: #3771f5;
        line-height: 30px;
      }
      .uploadDemo {
        margin-left: 10px;
      }
    }
    .bottomMain {
      padding: 10px;
      padding-top: 5px;
      box-sizing: border-box;
      .title1,
      .title2 {
        font-size: 18px;
        font-family: Alibaba PuHuiTi;
        font-weight: 400;
        color: #393b3c;
        line-height: 38px;
      }
      .addForm {
        width: 500px;
        margin: 50px auto;
      }
      .tableContainer {
        width: 100%;
        padding: 0 10px 10px;
        box-sizing: border-box;
        background: #ffffff;
        border: 1px solid #91b2cc;
        border-radius: 4px;
        .searchInput {
          margin-right: 10px;
        }
        .myTabel {
          margin: 0 0 10px;
          width: 100%;
          .tableLineInput {
            width: 100px;
          }
        }
      }
      .graph {
        width: 100%;
        height: 400px;
        border: 1px solid #91b2cc;
        border-radius: 4px;
      }
      .bottomBtn {
        width: 100%;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
  .timeItem {
    height: 30px;
    width: 30px;
    position: absolute;
    left: -11px;
    top: 0;
  }
  .hisInfoItem {
    line-height: 30px;
    color: #5f6678;
    & > div:nth-child(1) {
      padding: 8px;
      line-height: 22px;
      box-sizing: border-box;
      width: 100%;
      background-color: #f0f4fc;
      border-radius: 4px;
      font-size: 18px;
      font-weight: 700;
    }
  }
}
</style>
